<template>
  <div class="game-content-view">
    <div class="game-time" @click="actionClickGameTime">
      {{gameTimeNumber}}
    </div>
    <div class="game-home-content" @click="actionClickGameHome">
      <img src="./image/home.png" alt="">
    </div>
    <div class="game-score-active flex-middle-x">
      <p class="game-red" @click="actionClickGameScoreLeftReduce">-</p>
      <p @click="actionClickGameScoreRightReduce">-</p>
    </div>
    <div class="game-score">
      <p class="game-red" @click="actionClickGameScoreLeft">红方：{{gameScoreLeftNumber}}</p>
      <p @click="actionClickGameScoreRight">蓝方：{{gameScoreRightNumber}}</p>
    </div>
    <img class="game-background-image" :src="gameBackgroundImage" alt="">
    <ul class="game-topic-content flex-middle-x">
      <li v-for="(item, index) in gameTopicList[gameIndex].name1[gameNumber].name2">
        <span>{{item.title}}</span>
        <p>{{index+1}}</p>
      </li>
    </ul>
    <div class="game-footer-button"
         v-if="isFinishGameFooterButton"
         @click="actionClickGameFooter">
      查看答案
    </div>
    <div class="game-next-topic"
         v-if="isFinishGameFooterButton && gameNumber < (gameTopicList[gameIndex].name1.length - 1)"
         @click="actionClickNextTopic">
      下一题
    </div>
    <div class="answer-content" v-if="isFinishAnswer">
      <div class="answer-background"></div>
      <div class="answer-box bounceInDown animated">
        <p>{{answerList[gameIndex].answer1[gameNumber].answer2}}</p>
        <img src="./image/activity-close.png" alt="" @click="actionClickAnswer">
      </div>
    </div>
    <div class="music-content">
      <audio id="music1" :src="musicAudio" controls="controls" autoplay>
      </audio>
    </div>
  </div>
</template>
<script>
  export default {
    name:'',
    data(){
      return {
        isFinishAnswer:false,
        gameScoreLeftNumber:0,
        gameScoreRightNumber:0,
        gameTimeClear:null,
        gameNumber:0,
        gameTimeNumber:10,
        gameTopicList:[
          {name1:[
            {name2:[
              {title:'艹'},
              {title:'匕'},
              {title:'亻'},
              {title:'丶'}
            ]}
          ]},
          {name1:[
            {name2:[
              {title:'麦'},
              {title:'丶'},
              {title:'人'},
              {title:'二'}
            ]},
            {name2:[
              {title:'皿'},
              {title:'日'},
              {title:'丨'},
              {title:'氵'}
            ]},
            {name2:[
              {title:'米'},
              {title:'了'},
              {title:'艹'},
              {title:'一'}
            ]},
            {name2:[
              {title:'艹'},
              {title:'艹'},
              {title:'氵'},
              {title:'耒'}
            ]},
            {name2:[
              {title:'丬'},
              {title:'艹'},
              {title:'酉'},
              {title:'夕'}
            ]},
            {name2:[
              {title:'一'},
              {title:'禾'},
              {title:'艹'},
              {title:'不'}
            ]},
            {name2:[
              {title:'内'},
              {title:'皿'},
              {title:'艹'},
              {title:'口'}
            ]},
            {name2:[
              {title:'口'},
              {title:'力'},
              {title:'艹'},
              {title:'贝'}
            ]},
            {name2:[
              {title:'口'},
              {title:'丶'},
              {title:'有'},
              {title:'丿'}
            ]},
            {name2:[
              {title:'人'},
              {title:'人'},
              {title:'丿'},
              {title:'冂'}
            ]},
            {name2:[
              {title:'几'},
              {title:'不'},
              {title:'士'},
              {title:'冖'}
            ]},
            {name2:[
              {title:'水'},
              {title:'木'},
              {title:'口'},
              {title:'士'}
            ]},
            {name2:[
              {title:'八'},
              {title:'刂'},
              {title:'叔'},
              {title:'十'}
            ]},
            {name2:[
              {title:'禾'},
              {title:'刂'},
              {title:'木'},
              {title:'口'}
            ]},
            {name2:[
              {title:'二'},
              {title:'宀'},
              {title:'夗'},
              {title:'豆'}
            ]},
            {name2:[
              {title:'豆'},
              {title:'氵'},
              {title:'丨'},
              {title:'二'}
            ]},
            {name2:[
              {title:'二'},
              {title:'丿'},
              {title:'亅'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'土'},
              {title:'日'},
              {title:'刀'},
              {title:'口'}
            ]},
            {name2:[
              {title:'丿'},
              {title:'口'},
              {title:'口'},
              {title:'贝'}
            ]}
          ]},
          {name1:[
            {name2:[
              {title:'宀'},
              {title:'匕'},
              {title:'虫'},
              {title:'丿'}
            ]},
            {name2:[
              {title:'艹'},
              {title:'乌'},
              {title:'丶'},
              {title:'又'}
            ]},
            {name2:[
              {title:'工'},
              {title:'犭'},
              {title:'田'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'虫'},
              {title:'丶'},
              {title:'斤'},
              {title:'木'}
            ]},
            {name2:[
              {title:'凸'},
              {title:'土'},
              {title:'土'},
              {title:'虫'}
            ]},
            {name2:[
              {title:'口'},
              {title:'丿'},
              {title:'鸟'},
              {title:'月'}
            ]},
            {name2:[
              {title:'犭'},
              {title:'刂'},
              {title:'帀'},
              {title:'〢'}
            ]},
            {name2:[
              {title:'心'},
              {title:'月'},
              {title:'古'},
              {title:'虫'}
            ]},
            {name2:[
              {title:'口'},
              {title:'天'},
              {title:'虫'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'王'},
              {title:'白'},
              {title:'丨'},
              {title:'虫'}
            ]},
            {name2:[
              {title:'龙'},
              {title:'凡'},
              {title:'工'},
              {title:'心'}
            ]},
            {name2:[
              {title:'木'},
              {title:'世'},
              {title:'虫'},
              {title:'禾'}
            ]},
            {name2:[
              {title:'心'},
              {title:'少'},
              {title:'氵'},
              {title:'鱼'}
            ]},
            {name2:[
              {title:'口'},
              {title:'下'},
              {title:'豸'},
              {title:'刀'}
            ]},
            {name2:[
              {title:'木'},
              {title:'氺'},
              {title:'牛'},
              {title:'尸'}
            ]}
          ]},
          {name1:[
            {name2:[
              {title:'十'},
              {title:'又'},
              {title:'木'},
              {title:'田'}
            ]},
            {name2:[
              {title:'亻'},
              {title:'艹'},
              {title:'呆'},
              {title:'八'}
            ]},
            {name2:[
              {title:'氵'},
              {title:'二'},
              {title:'人'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'丿'},
              {title:'心'},
              {title:'日'},
              {title:'木'}
            ]},
            {name2:[
              {title:'禾'},
              {title:'八'},
              {title:'十'},
              {title:'口'}
            ]},
            {name2:[
              {title:'艹'},
              {title:'太'},
              {title:'可'},
              {title:'亻'}
            ]},
            {name2:[
              {title:'罒'},
              {title:'艹'},
              {title:'心'},
              {title:'夕'}
            ]},
            {name2:[
              {title:'少'},
              {title:'十'},
              {title:'八'},
              {title:'攵'}
            ]},
            {name2:[
              {title:'厶'},
              {title:'艹'},
              {title:'木'},
              {title:'八'}
            ]},
            {name2:[
              {title:'辶'},
              {title:'车'},
              {title:'艹'},
              {title:'花'}
            ]},
            {name2:[
              {title:'木'},
              {title:'开'},
              {title:'刂'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'竹'},
              {title:'刂'},
              {title:'力'},
              {title:'月'}
            ]},
            {name2:[
              {title:'宀'},
              {title:'丶'},
              {title:'亘艹'},
              {title:''}
            ]},
            {name2:[
              {title:'衣'},
              {title:'千'},
              {title:'黑'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'旦'},
              {title:'木'},
              {title:'丶'},
              {title:'木'}
            ]},
            {name2:[
              {title:'一'},
              {title:'皿'},
              {title:'丨'},
              {title:'口'}
            ]}
          ]},
          {name1:[
            {name2:[
              {title:'寸'},
              {title:'刀'},
              {title:'皿'},
              {title:'八'}
            ]},
            {name2:[
              {title:'可'},
              {title:'口'},
              {title:'木'},
              {title:'大'}
            ]},
            {name2:[
              {title:'内'},
              {title:'口'},
              {title:'钅'},
              {title:'巴'}
            ]},
            {name2:[
              {title:'忄'},
              {title:'竹'},
              {title:'夬'},
              {title:'刀'}
            ]},
            {name2:[
              {title:'丿'},
              {title:'一'},
              {title:'钅'},
              {title:'丨'}
            ]},
            {name2:[
              {title:'木'},
              {title:'千'},
              {title:'讠'},
              {title:'口'}
            ]},
            {name2:[
              {title:'大'},
              {title:'口'},
              {title:'心'},
              {title:'火'}
            ]},
            {name2:[
              {title:'日'},
              {title:'丿'},
              {title:'禾'},
              {title:'巾'}
            ]},
            {name2:[
              {title:'艹'},
              {title:'王'},
              {title:'宀'},
              {title:'丶'}
            ]},
            {name2:[
              {title:'至'},
              {title:'丶'},
              {title:'冖'},
              {title:'心'}
            ]},
            {name2:[
              {title:'禾'},
              {title:'丶'},
              {title:'尸'},
              {title:'火'}
            ]},
            {name2:[
              {title:'亻'},
              {title:'禾'},
              {title:'百'},
              {title:'宀'}
            ]},
            {name2:[
              {title:'亻'},
              {title:'戈'},
              {title:'门'},
              {title:'艹'}
            ]},
            {name2:[
              {title:'日'},
              {title:'土'},
              {title:'皿'},
              {title:'卜'}
            ]},
            {name2:[
              {title:'表'},
              {title:'口'},
              {title:'钅'},
              {title:'丨'}
            ]},
            {name2:[
              {title:'车'},
              {title:'广'},
              {title:'子'},
              {title:'衤'}
            ]},
            {name2:[
              {title:'人'},
              {title:'二'},
              {title:'扌'},
              {title:'手'}
            ]},
            {name2:[
              {title:'土'},
              {title:'子'},
              {title:'土'},
              {title:'革'}
            ]}
          ]}
        ],
        answerList:[
          {answer1:[
            {answer2:'花'}
          ]},
          {answer1:[
            {answer2:'麸'},
            {answer2:'油'},
            {answer2:'籽'},
            {answer2:'藕'},
            {answer2:'酱'},
            {answer2:'苤'},
            {answer2:'莴'},
            {answer2:'茄'},
            {answer2:'肴'},
            {answer2:'肉'},
            {answer2:'壳'},
            {answer2:'桔'},
            {answer2:'椒'},
            {answer2:'梨'},
            {answer2:'豌'},
            {answer2:'豇'},
            {answer2:'芋'},
            {answer2:'哩'},
            {answer2:'圆'}
          ]},
          {answer1:[
            {answer2:'蛇'},
            {answer2:'鸡'},
            {answer2:'猫'},
            {answer2:'蜥'},
            {answer2:'蛙'},
            {answer2:'鹃'},
            {answer2:'狮'},
            {answer2:'蝴'},
            {answer2:'蜈'},
            {answer2:'蝗'},
            {answer2:'恐'},
            {answer2:'蝶'},
            {answer2:'鲨'},
            {answer2:'貂'},
            {answer2:'犀'}
          ]},
          {answer1:[
            {answer2:'枝'},
            {answer2:'葆'},
            {answer2:'芙'},
            {answer2:'香'},
            {answer2:'杏'},
            {answer2:'荷'},
            {answer2:'萝'},
            {answer2:'枚'},
            {answer2:'松'},
            {answer2:'莲'},
            {answer2:'荆'},
            {answer2:'筋'},
            {answer2:'萱'},
            {answer2:'薰'},
            {answer2:'楂'},
            {answer2:'叶'}
          ]},
          {answer1:[
            {answer2:'盆'},
            {answer2:'椅'},
            {answer2:'锅'},
            {answer2:'筷'},
            {answer2:'针'},
            {answer2:'话'},
            {answer2:'烟'},
            {answer2:'帕'},
            {answer2:'宝'},
            {answer2:'室'},
            {answer2:'炉'},
            {answer2:'宿'},
            {answer2:'阀'},
            {answer2:'霜'},
            {answer2:'盐'},
            {answer2:'钟'},
            {answer2:'裤'},
            {answer2:'扶'},
            {answer2:'鞋'}
          ]}
        ]
      }
    },
    computed:{
      isFinishGameFooterButton(){
        if (this.gameTimeNumber){
          return false;
        } else {
          return true;
        }
      },
      gameIndex(){
        return parseInt(this.$route.query.gameIndex);
      },
      gameBackgroundImage(){
        if (this.gameIndex === 0){
          return require('./image/game-view-image.jpg')
        } else if (this.gameIndex === 1) {
          return require('./image/catalogue-view-image.jpg')
        } else if (this.gameIndex === 2) {
          return require('./image/game-view-image2.jpg')
        } else if (this.gameIndex === 3) {
          return require('./image/game-view-image1.jpg')
        } else if (this.gameIndex === 4) {
          return require('./image/game-view-image.jpg')
        }
      },
      musicAudio(){
        if (this.gameIndex === 0){
          return 'https://i-pds-beta.oss-cn-shanghai.aliyuncs.com/music/cf.mp3'
        } else if (this.gameIndex === 1) {
          return 'https://i-pds-beta.oss-cn-shanghai.aliyuncs.com/music/du.mp3'
        } else if (this.gameIndex === 2) {
          return 'https://i-pds-beta.oss-cn-shanghai.aliyuncs.com/music/sz.mp3'
        } else if (this.gameIndex === 3) {
          return 'https://i-pds-beta.oss-cn-shanghai.aliyuncs.com/music/du.mp3'
        } else if (this.gameIndex === 4) {
          return 'https://i-pds-beta.oss-cn-shanghai.aliyuncs.com/music/sz.mp3'
        }
      }
    },
    methods:{
      actionClickGameFooter(){
        this.isFinishAnswer = true;
      },
      actionClickGameTime(){
        var audio = document.getElementById('music1');
        audio.pause();
      },
      actionClickNextTopic(){
        this.gameNumber++;
        this.gameTimeNumber = 10;
        this.getTime();
        var audio = document.getElementById('music1');
        audio.play();
      },
      actionClickGameHome(){
        this.setTime();
        this.$router.push({name:'CatalogueViewPage'})
      },
      actionClickGameScoreLeft(){
        this.gameScoreLeftNumber++;
      },
      actionClickGameScoreLeftReduce(){
        this.gameScoreLeftNumber--;
      },
      actionClickGameScoreRight(){
        this.gameScoreRightNumber++;
      },
      actionClickGameScoreRightReduce(){
        this.gameScoreRightNumber--;
      },
      actionClickAnswer(){
        this.isFinishAnswer = false;
      },
      getTime(){
        this.gameTimeClear = setInterval(() => {
          this.gameTimeNumber--;
          if (this.gameTimeNumber <= 0){
            clearInterval(this.gameTimeClear);
          }
        }, 1000)
      },
      setTime(){
        clearInterval(this.gameTimeClear);
      }
    },
    mounted(){
      this.getTime();
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .game-content-view{
    .game-background-image{
      width:100%;
      height:100%;
      position: fixed;
      top:0;left:0;
    }
    .game-time{
      width:200px;
      height:200px;
      font-size:100px;
      background:$color-4;
      border-radius: 50%;
      position: fixed;
      top:50px;left:50px;
      z-index:2;
      text-align: center;
      line-height: 200px;
      color:$color-black;
    }
    .game-score{
      font-size:50px;
      position: fixed;
      top:50px;right:50px;
      z-index:2;
      text-align: center;
      line-height: 100px;
      p{
        width:400px;
        height:100px;
        background:#02abfa;
        border-radius: 50px;
        margin-top:30px;
        cursor: pointer;
        color:$color-4;
      }
      .game-red{
        background:red;
        color:$color-4;
      }
    }
    .game-score-active{
      font-size:50px;
      position: fixed;
      top:0px;right:450px;
      z-index:2;
      text-align: center;
      line-height: 50px;
      p{
        width:50px;
        height:50px;
        background:#02abfa;
        border-radius: 50px;
        margin-top:30px;
        cursor: pointer;
        color:$color-4;
      }
      .game-red{
        background:red;
        color:$color-4;
      }
    }
    .game-home-content{
      width:100px;
      height:100px;
      font-size:50px;
      background:#02abfa;
      border-radius: 50%;
      position: fixed;
      bottom:50px;right:50px;
      z-index:2;
      text-align: center;
      line-height: 100px;
      color:$color-4;
      cursor: pointer;
      img{
        width:50px;
        height:50px;
      }
    }
    .game-topic-content{
      width:800px;
      height:200px;
      background:$color-4;
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      margin:auto;
      li{
        width:200px;
        height:200px;
        background:url('./image/tian-image.png') no-repeat;
        background-size:100% 100%;
        font-size:120px;
        color:$color-black;
        text-align: center;
        position: relative;
        span{
          line-height:200px;
        }
        p{
          position: absolute;
          top:0;left:0;
          font-size:60px;
        }
      }
    }
    .game-footer-button{
      width:300px;
      height:100px;
      position: fixed;
      top:500px;left:0;right:400px;bottom:0;
      margin:auto;
      font-size:50px;
      color:$color-4;
      cursor: pointer;
      z-index:2;
      background:#02abfa;
      line-height:100px;
      border-radius: 50px;
      text-align: center;
    }
    .game-next-topic{
      width:300px;
      height:100px;
      position: fixed;
      top:500px;left:400px;right:0;bottom:0;
      margin:auto;
      font-size:50px;
      color:$color-4;
      cursor: pointer;
      z-index:2;
      background:#02abfa;
      line-height:100px;
      border-radius: 50px;
      text-align: center;
    }
    .answer-content{
      width:100%;
      height:100%;
      position: fixed;
      top:0;left:0;
      z-index:100;
      .answer-background{
        width:100%;
        height:100%;
        position: fixed;
        top:0;left:0;
        z-index:1;
        background:$color-black;
        opacity:0.5;
      }
      .answer-box{
        width:500px;
        height:500px;
        position: fixed;
        top:0;left:0;right:0;bottom:0;
        margin:auto;
        background:#02abfa;
        border-radius:5px;
        z-index:2;
        text-align: center;
        background:url('./image/tian-image.png') no-repeat;
        background-size:100% 100%;
        p{
          position: absolute;
          top:0;left:0;right:0;bottom:0;
          margin:auto;
          font-size:200px;
          color:$color-black;
          line-height:500px;
        }
        img{
          width:50px;
          position: absolute;
          top:-25px;right:-25px;
          cursor: pointer;
        }
      }
    }
  }
  .music-content{
    position: fixed;
    top:0;left:0;
    z-index:10000;
    color:$color-4;
    font-size:30px;
    opacity: 0;
  }
</style>
